<template>
  <div class="store-part">
    <div class="common-bottom">
      <div class="common-bottom-store" v-if="storeList && storeList.length > 0">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text=""
          @load="onLoad"
        >
          <div
            v-for="(item, index) in storeList"
            :key="item.self_address_id"
            class="common-bottom-store-item">
            <div class="store-info">
              <div class="store-flex">
                <div class="store-info-img">
                  <img :src="item.imgdir || errorImg" alt="">
                </div>
                <div class="store-info-wrap">
                  <div class="title" v-if="item.shop_name">{{ item.shop_name }}</div>
                  <div class="local city_area">{{ item.province_city_area }}</div>
                  <div class="local">{{ item.address }}</div>
                </div>
              </div>
              <div class="store-info-btn">
                <div class="btn">
                  <a @click="openLink(item.link)"> 
                    <span>
                      <span>进店</span><img class="icon" src="https://img.wifenxiao.com/h5-wfx/images/shop/storeList/store_next1.png" alt="">
                    </span>
                  </a>
                </div>
                <div class="distance" v-if="item.distance">距您{{ item.distance }} km</div>
                <div class="store-icon">
                  <img @click="handleClickCheckMap(item)" src="https://img.wifenxiao.com/h5-wfx/images/shop/storeList/map.png" alt="">
                  <a @click="wxPhoneCall(item.phone)" v-if="storeHideMobile!=1"><img src="https://img.wifenxiao.com/h5-wfx/images/shop/storeList/phone.png" alt=""></a>
                </div>
              </div>
            </div>
            <!-- <div class="store-btn">
              <a @click="handleClickCheckMap(item)" class="btn-item">查看地图</a>
              <a @click="wxPhoneCall(item.phone)" class="btn-item" v-if="storeHideMobile!=1">联系服务顾问</a>

            </div> -->
          </div>
        </van-list>
      </div>
      <div v-else>
        <no-data :noData="noData"></no-data>
      </div>
    </div>
  </div>
</template>

<script>
  import noData from '@/components/noData/index'
  import { storeList } from '@/api/shop'
  import { isAPP } from '@/utils/validate'
  import { openPage } from '@/utils/utils'
  import Vue from 'vue'
  import { List } from 'vant'
  import Storage from '@/utils/store.js'
  import small from '@/smallapp/small'
  
  Vue.use(List)
  export default Vue.extend({
    name: 'index',
    components: {
      noData
    },
    data() {
      return {
        errorImg:'https://img.wifenxiao.com/h5-wfx/images/public/imgError.jpg',
        noData: {
          text: '暂无门店数据',
          img: 'https://img.wifenxiao.com/h5-wfx/images/no_goods.png',
          width: '214px',
          marginTop: '60px',
          txtMarginTop: '-30px'
        },
        storeList: [],
        loading: false,
        finished: false,
        locked: true,
        postData: {
          p: 2
        },
        getData: {},
        supplier_id: '',
        storeHideMobile: 0 // 是否隐藏门店联系方式 1为隐藏
      }
    },
    created() {
      this.supplier_id = this.$route.query.id
      const group_id = this.$route.query.group_id
      this.cid = this.$route.query.cid
      if ((Storage.fetchLocal('isShowSelfStore') && Storage.fetchLocal('isShowSelfStore') == 1) && this.supplier_id) {
        this.storeListPost({ p: 1, supplier_id: this.supplier_id, cid: this.cid, group_id })
      } else {
        this.storeListPost({ p: 1, cid: this.cid, group_id })
      }
      // this.storeListPost({ p: 1 })
    },
    methods: {
      // TODO 微分销与小程序差别：拨打电话
      wxPhoneCall(phone) {
        wx.makePhoneCall({
          phoneNumber: phone
        })
      },
      openLink(link){
        openPage(link)
      },
      onLoad() {
        if (this.finished) return false
        if (!this.locked) {
          const postData = Object.assign(this.getData, this.postData, true)
          storeList(postData).then(res => {
            this.loading = false
            if (res.status == 1) {
              this.storeList = this.storeList.concat(res.data.list)
              const cateData = {
                cate_lists: res.data.cate_lists,
                all_cate: res.data.all_cate
              }
              this.$emit('pushCateList', cateData)
            }
            this.postData.p++
            if (res.data.list < 10) {
              this.finished = true
            }
          })
        }
      },
      storeListPost(data) {
        const postData = Object.assign({}, data, true)
        this.getData = postData
        this.loading = true
        this.$loadingWrap.show()
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 50000)
        storeList(postData).then(res => {
          this.$loadingWrap.close()
          this.loading = false
          if (res.status == 1) {
            this.storeList = res.data.list
            this.storeHideMobile = res.data.storeHideMobile
            const cateData = {
              cate_lists: res.data.cate_lists,
              all_cate: res.data.all_cate
            }
            this.$emit('pushCateList', cateData)
            if (res.data.list < 10) {
              this.finished = true
            }
          }
          this.locked = false
        })
      },
      // 点击查看地图
      handleClickCheckMap(item) {
        // TODO 小程序调用第三方地图
          wx.openLocation({
            latitude: Number(item.latitude),
            longitude: Number(item.longitude),
            scale: 28,
            name: item.shop_name,
            address: item.address
          })
      },
      locationLink(item, type) {
        let url = ''
        if (type == 1) {
          url = 'https://m.amap.com/navi/?dest=' + item.longitude + ',' + item.latitude + '&destName=' + item.shop_name + '&addr=' + item.address + '&key=552f0986c98fa36d395d95d52f3e9706'
        } else if (type == 2) {
          url = 'https://apis.map.qq.com/tools/poimarker?type=0&marker=coord:' + item.latitude + ',' + item.longitude + ';title:' + item.shop_name + ';addr:' + item.address + '&key='+small.wxCache('tencentMapKey')+'&referer=storelocation'
        }
        location.href = url
      }
    }
  })
</script>

<style lang="scss">
  @import 'src/styles/mixin';
  .store-part{
    min-height: 800px;
    .common-bottom{
      &-store{
        padding: 0 20px;
        &-item{
          background: #fff;
          border-radius: 12px;
          margin-bottom: 16px;
          .store-info{
            display: flex;
            padding: 24px;
            // border-bottom: 1px solid #EDEDED;
            justify-content: space-between;
            align-items: center;
            height: 176px;
            .store-flex {
              display: flex;
            }
            &-img{
              width: 80px;
              height: 80px;
              border-radius: 8px;
              overflow: hidden;
              margin-right: 16px;
              img{
                width: 100%;
              }
            }
            &-wrap{
              flex: 1;
              max-width: 400px;
              .title{
                color: #333333;
                font-size: 28px;
                font-weight: bold;
                margin-bottom: 12px;
                // height: 38px;
                line-height: 38px;
                @include showEllipsis;
              }
              .local{
                // line-height: 40px;
                // font-size: 22px;
                color: #666666;
                @include lineClamp(22px, 1.4, 2);
                &.city_area {
                  margin-bottom:8px
                }
              }
            }
            &-btn{
              text-align: right;
              // padding-top: 20px;
              margin-top: 8px;
              border-left: 1px solid #F2F3F5;
              padding-left: 24px;
              .btn{
                width: 110px;
                text-align: center;
                color: #FF2A40;
                border: 2px solid #FF2A40;
                border-radius: 50px;
                // padding-top: 6px;
                font-size: 24px;
                margin: auto;
                height: 42px;
                span{
                  // @include alignTop;
                  line-height: 24px;
                  font-size: 24px;
                  height: 24px;
                  position: relative;

                  .icon{
                    height: 26px;
                    width: 26px;
                    margin-left: 4px;
                    position: relative;
                    top: 5px
                  }
                }
              }
              .distance{
                color: #666;
                padding-top: 10px;
                font-size: 20px;
                
              }
            }
          }
          .store-icon {
            text-align: center;
            margin-top: 16px;
            img {
              width: 40px;
              height: 40px;
            }
            a {
              margin-left: 16px;
            }
          }
          .store-btn{
            display:flex;
            font-size: 0;
            padding: 20px 0;
            .btn-item{
              @include alignTop;
              // width: 50%;
              flex:1;
              height: 40px;
              line-height: 40px;
              text-align: center;
              font-size: 24px;
              color: #666;
              &:last-child{
                border-left: 1px solid #ededed;
              }
            }
          }
        }
      }
    }
  }
</style>
